<template>
  <div id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "ConsumerTaste",
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '用户爱好分布图'
      },
      legend: {
        data: ['用户爱好分布']
      },
      radar: {
        // shape: 'circle',
        indicator: []
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [12,2,5,4,5,20,45,33,66,88,44,55],
              name: '用户爱好分布'
            },
          ]
        }
      ]
    };
    //发送请求到后端请求数据
    this.request.get("/echarts/videoHeat").then(res => {
      if(res.state === 200){
        //将后端得到的数据放入数组中
        // console.log(res)
        let maxNumber = -1;
        for (let i = 0; i < res.data.data.length; i++) {
          if (res.data.data[i] > maxNumber){
            maxNumber = res.data.data[i]
          }
        }
        let v = [];
        for (let i = 0; i < res.data.itemName.length; i++) {
          // console.log(res.data.itemName[i])
          let vi = {
            name:res.data.itemName[i],
            max:maxNumber,
          }
          v.push(vi)
        }
        option.radar.indicator = v;
        option.series[0].data[0].value = res.data.data
        // option.legend.data = res.data.itemName

        //数据准备完毕后在set
        myChart.setOption(option);
      }

    })
  }
}
</script>

<style scoped>

</style>